<template>
  <view
    :style="`padding-top: ${safeareaTop <= 60 ? safeareaTop + 60 : safeareaTop}rpx`"
  >
    <Layout
      :bgColor="'background: linear-gradient(to bottom, #fff, #b8e2fa);'"
      :tab-id="1"
    >
      <template #content>
        <view class="w-full flex justify-center items-center mb-6">
          <text class="text-lg font-bold text-gray-800">服务</text>
        </view>

        <view class="flex flex-wrap justify-between mt-4 p-2">
          <view
            class="w-[42%] rounded-[15rpx] flex flex-col p-2 mb-6"
            v-for="item in serviceList"
            :key="item.id"
            @click="navigateToServiceInfo(item)"
          >
            <image
              class="w-[280rpx] h-[280rpx] rounded-[15rpx] object-cover mb-3 self-center"
              :src="item.url"
              mode="aspectFill"
            />
            <view class="w-full text-left">
              <text class="block text-[15px] font-bold text-gray-900 mb-1">
                {{ item.name }}
              </text>
              <text
                class="block text-[12px] font-medium"
                :class="
                  item.price === '无' ? 'text-green-500' : 'text-blue-500'
                "
              >
                {{ item.address }}
              </text>
            </view>
          </view>
        </view>
      </template>
    </Layout>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { getEvent } from '@/api/event'
import Layout from '@/components/Layout/tabLayout.vue'
import useStore from '@/store'
const store = useStore()

const safeareaTop = computed(() => {
  return store.useSafeArea.getSafeAreaTop
})

const serviceList = ref<ServiceItem[]>([])

function navigateToServiceInfo(item: ServiceItem) {
  uni.navigateTo({
    url: `/pages/service/serviceInfo?id=${item.id}`
  })
}

onMounted(() => {
  getEvent<IPaginationParams, ServiceItem>({
    page: 1,
    pageSize: 10
  }).then((res) => {
    serviceList.value = res.data.items
  })
})
</script>
